<template>
	<transition name="fade">
		<div class="slide-wrapper" v-show="settingVisible === 3">
			<transition name="slide-right">
				<div class="slide-content" v-show="settingVisible === 3">
					<div class="slide-content-top">
						<div class="content-top-introduce">
							<img :src="coverUrl" class="introduce-img" />
							<div class="introduce-text">
								<div class="introduce-text-title">{{metaData.title}}</div>
								<div class="introduce-text-author">{{metaData.creator}}</div>
							</div>
							<span class="introduce-icon el-icon-arrow-right"></span>
						</div>
						<div class="content-top-search">
							<!-- @blur="searchVisble = false" -->
							<el-input @keyup.enter.native="handleSeachByKeyword" clearable @focus="searchVisble = true" :placeholder="$t('book.searchHint')" v-model="inputSearch">
								<i slot="prefix" class="el-input__icon el-icon-search"></i>
							</el-input>
							<span @click="handleClickCancelSearch" v-if="searchVisble" class="cancelSearch-text ml-10">取消</span>
						</div>
					</div>
					<div class="slide-content-inner">
						<ebookslide-nav v-if="bookAvailable && selectTab === 'nav'" :searchVisble="searchVisble" :searchList="searchList"></ebookslide-nav>
						<ebookslide-mark v-if="bookAvailable && selectTab === 'mark'" ></ebookslide-mark>
						<div class="ebookLoading-wrappper-parent">
							<ebook-loading v-if="settingVisible === 3 && !bookAvailable"></ebook-loading>
						</div>
					</div>
					<div class="slide-content-footer">
						<div class="content-footer-item" @click="handleClickSetTab('nav')" :class="{'selected': selectTab === 'nav'}">
							{{$t('book.navigation')}}
						</div>
						<div class="content-footer-item" @click="handleClickSetTab('mark')" :class="{'selected': selectTab === 'mark'}">
							{{$t('book.bookmark')}}
						</div>
					</div>
				</div>
			</transition>
			<div class="slide-backdrop" @click="handlebackdrop()">

			</div>
		</div>
	</transition>
</template>

<script>
	import {
		ebookMixin
	} from '../../utils/mixin.js';
	import EbookslideNav from '@/components/ebook/EbookslideNav.vue';
	import EbookslideMark from '@/components/ebook/EbookslideMark.vue';
	import EbookLoading from '@/components/ebook/EbookLoading.vue';

	export default {
		name: 'ebookSlide',
		mixins: [ebookMixin],
		data() {
			return {
				inputSearch: undefined,
				selectTab: 'nav',
				searchVisble: false, // 是否展示搜索信息
				searchList: [] , // 搜索数组
			}
		},
		components: {
			EbookslideNav,
			EbookslideMark,
			EbookLoading
		},
		methods: {
			handlebackdrop() {
				this.hideTitleAndMenu()
				this.selectTab = 'nav'
			},
			handleClickSetTab(key) {
				this.selectTab = key
			},
			handleClickCancelSearch() {
				this.searchVisble = false
				this.inputSearch = undefined
				this.searchList = []
			},
			handleSeachByKeyword() {
				this.searchVisble = true
				this.currentBook.ready.then(() => {
					this.doSearch(this.inputSearch)
				})
			},
			doSearch(q) {
				return Promise.all(
					this.currentBook.spine.spineItems.map(
						item => item.load(this.currentBook.load.bind(this.currentBook))
							.then(item.find.bind(item,q))
							.finally(item.unload.bind(item)) // 解绑释放资源
					)
				).then(results => {
					// apply 空数组使二维数组变为一维数组
					this.searchList = [].concat.apply([],results)
					this.searchList.forEach(item => {
						item.excerpt = this.handleExcerpt(item.excerpt)
					})
					
					function deWeight(arr) {
						const substrNum =  40
							for (var i = 0; i < arr.length - 1; i++) {
								for (var j = i + 1; j < arr.length; j++) {
									if (arr[i].excerpt.substring(0,substrNum) == arr[j].excerpt.substring(0,substrNum)) {
										arr.splice(j, 1);  // 删除数组元素
										//因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
										j--;
									}
								}
							}
						return arr;
					}
					// 防止同一词条  重复出现 （e.g  在同一段落 多次出现 目标关键字 会导致该段落重复出现在搜索结果上）
					this.searchList = deWeight(this.searchList)
					
					this.searchList.map(item => {
						item.excerpt = item.excerpt.replace(this.inputSearch,`<span class="keyWord">${this.inputSearch}</span>`)
						return item
					})
				})
			},
			// 处理搜索出来的文本--使得关键字始终展示出来，而不是因为超出行数被省略
			handleExcerpt(contentText) {
				const substrNum = 30
				const subcontentText = contentText.substring(0,substrNum)
				if(subcontentText.indexOf(this.inputSearch) === -1 && subcontentText !== contentText) {
					let moreContentText = contentText.substring(substrNum)
					return this.handleExcerpt(moreContentText)
				}else {
					return contentText
				}
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';

	.slide-wrapper {
		position: fixed;
		display: flex;
		top: pxTorem(0);
		left: pxTorem(0);
		right: pxTorem(0);
		bottom: pxTorem(0);
		width: 100%;
		height: 100%;

		.slide-content {
			width: 90%;
			display: flex;
			flex-direction: column;

			.slide-content-top {
				padding: pxTorem(50) pxTorem(20) pxTorem(10);
				border-bottom: pxTorem(1.5) solid #C7CFBD;
				.content-top-introduce {
					position: relative;
					@include flexYcenter;

					.introduce-img {
						width: pxTorem(50);
						height: pxTorem(70);
						border-radius: pxTorem(3);
					}

					.introduce-text {
						margin-left: pxTorem(15);
						margin-right: pxTorem(50);
						.introduce-text-title {
							font-size: pxTorem(16);
							font-weight: bold;
							margin-bottom: pxTorem(15);
							line-height: pxTorem(18);
							@include  overShowSpotNum(2);
						}

						.introduce-text-author {
							font-size: pxTorem(12);
							color: #999;
						}
					}

					.introduce-icon {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 0;
						font-size: pxTorem(16);
						font-weight: bold;
						color: #8F9587;
					}
				}

				.content-top-search {
					@include  flexYcenter;
					font-size: pxTorem(14);
					margin-top: pxTorem(20);
					.cancelSearch-text {
						color: #8D9686;
					}
					/deep/.el-input {
						flex: 1;
					}
					/deep/.el-input__inner::placeholder {
						color: #99A091;
					}

					/* 谷歌 */
					/deep/.el-input__inner::-webkit-input-placeholder {
						color: #99A091;
					}

					/* 火狐 */
					/deep/.el-input__inner:-moz-placeholder {
						color: #99A091;
					}

					/*ie*/
					/deep/.el-input__inner:-ms-input-placeholder {
						color: #99A091;
					}

					/deep/.el-input__inner {
						border: none;
						color: #333;
						background-color: #CAD7BE;
						border-radius: pxTorem(20);
					}

					/deep/ .el-input__prefix {
						color: #99A091;
						left: pxTorem(10);
					}
					
					/deep/ .el-input__icon {
						display: flex;
						align-items: center;
					}
				}
			}

			.slide-content-inner {
				position: relative;
				flex: 1;
				font-size: pxTorem(14);
				.ebookLoading-wrappper-parent {
					position: absolute;
					width: 100%;
					height: 100%;
					@include  flexCenter;
				}
			}

			.slide-content-footer {
				display: flex;
				height: pxTorem(100);
				box-sizing: border-box;
				padding-bottom: pxTorem(30);
				background: #D5DDC9;
				border-top: pxTorem(1) solid #C7CFBD;
				z-index: 100;
				.content-footer-item {
					flex: 1;
					font-size: pxTorem(16);
					color: #8F9588;
					@include flexCenter;
					&.selected {
						color: #333;
					}
				}
			}
		}
		.slide-backdrop {
			width: 10%;
		}
	}
</style>
